<template>
    <el-dialog
        :title='type'
        :visible.sync="showIf"
        @open='handleOpen'
        :lock-scroll='false'
        @close="$emit('update:dialogShowIf', false)"
        top='3vh'>
        
        <section class='classID' v-if='type==="部门"'>
            集合ID {{setid}}
        </section>

        <section class="searchdxa">
          <el-input
              :on-icon-click='handleIconClick'
              @keyup.enter.native='handleIconClick'
              style="width:85%" 
              icon="search"
              v-model='serachVal'
            ></el-input>
          <h4>默认结果只显示前300</h4>
        </section>

        <section class="table">
          <el-table
          :data="tableData"
          @row-click='handleRowClick'
           max-height='350'
           class='employRoster-dialog-table'
           style="width: 100%">

            <el-table-column
              v-for='(k,i) in tableOption'
              :prop='k.prop'
              :label='k.label'
              :width='k.width'
              class-name='column'
              >
            </el-table-column>
            
          </el-table>

        </section>
    </el-dialog>
</template>

<script>
import Vue from 'vue'
import { Dialog } from 'element-ui'
Vue.use(Dialog)

export default {
	data () {
		let that = this
		return {
			showIf: this.dialogShowIf,
			tableOption: [],
			tableData: [],
			serachVal: ''
		}
	},
	props: {
		dialogShowIf: {
			type: Boolean,
			default: false
		},
		title: {
			default: '提示'
		},
		setid: {
			default: ''
		},
		exunitId: {
			default: ''
		},
		type: {
			default: ''
		},
		bh: {
			default: ''
		}
	},

	watch: {
		dialogShowIf (newValue, oldValue) {
			this.showIf = this.dialogShowIf
		}
	},



	methods: {
		handleOpen () {
			this.serachVal = ''
			this.tableOption = []
			this.handleIconClick()
		},
		handleClose () {
			this.$emit('update:dialogShowIf', false)
		},
		handleIconClick () {

			switch (this.type) {
			case '部门':
				this.setBUMENtable()
				break

			case '发薪组织':
				this.setFAXINZUZHItable()
				break

			case '员工ID':
				this.setYUANGONGIDtable()
				break

			case '职务副职责':
				this.setZHIWUFUZHIZEtable()
				break


			default:
				break
			}
		},

		getParams ({ pageNum = 1, pageSize = 300, q = this.serachVal, bh } = {}) {
			let params = { pageNum, pageSize, q }
			if (bh) params.bh = bh

			return params
		},

		setBUMENtable () {
			this.tableData = []  

			let params = {
				setid: this.setid,
				exunitId:this.exunitId,
				q: this.serachVal
			}

			this.Axios
				.Post(this.URL.getDeptList.url, params)
				.then((res) => {
					this.tableData = res.data.datas && res.data.datas.deptList
					if (this.tableData == []) return
					this.tableOption = [
						{
							label: '部门编号',
							prop: 'deptid',
							width: '100'
						}, {
							label: '部门',
							prop: 'descrshort',
							width: '200'

						}, {
							label: '部门全称',
							prop: 'descr'
						}
					]
				})

		},
		setFAXINZUZHItable () {
			this.tableData = []
			this.Axios
				.Post(this.URL.getSalaryOrgList.url, this.getParams())
				.then((res) => {
					let datas = res.data.datas

					datas.showList.forEach(element => {
						if(element && element.company) {
							this.tableData.push(element)
						}
					})
					if (this.tableData == []) return
				
					this.tableOption = [
						{
							label: '编号',
							prop: 'company',
							width: '160'
						},
						{
							label: '公司',
							prop: 'com_desc',
						}
					]
				})


		},

		setYUANGONGIDtable () {
			this.tableData = []
			this.Axios
				.Post(this.URL.getEmployeeId.url, this.getParams())
				.then((res) => {
					let datas = res.data.datas
					this.tableData = datas && datas.showList

					if (this.tableData == []) return

					this.tableOption = [
						{
							label: '编号',
							prop: 'emplid',
							width: '140'
						},
						{
							label: '姓名',
							prop: 'name',
							width: '120'
						},
						{
							label: '部门',
							prop: 'dept_descr',
						}
					]
				})
		},
		setZHIWUFUZHIZEtable () {
			this.tableData = []
			this.Axios
				.Post(this.URL.getJobSubFunList.url, this.getParams({ bh: this.bh }))
				.then((res) => {
					let datas = res.data.datas
					this.tableData = datas && datas.showList

					if (this.tableData == []) return

					this.tableOption = [
						{
							label: '编号',
							prop: 'job_sub_func',
							width: '150'
						},
						{
							label: '类别',
							prop: 'job_sub_func_desc'
						}
					]
				}

				)
		},
		handleRowClick (row, column, event) {

			switch (this.type) {

			case '部门':
				this.handleBUMENselect(row)
				break

			case '发薪组织':
				this.handleFAXINZUZHIselect(row)
				break

			case '员工ID':
				this.handleYUANGONGIDselect(row)
				break

			case '职务副职责':
				this.handleZHIWUFUZHIZEselect(row)
				break


			default:
				break
			}

			this.handleClose()

		},
		handleFAXINZUZHIselect (data) {
			let { company: id, com_desc: info } = data
			let result = { id, info }
			this.$emit('formTop_three', result)
		},
		handleBUMENselect (data) {
			let { deptid: id, descr: info } = data
			let result = { id, info }
			this.$emit('formTop_two', result)
		},

		handleYUANGONGIDselect (data) {
			let { emplid: id, name: info } = data
			let result = { id, info }
			this.$emit('formBottom_one_left', result)
		},
		handleZHIWUFUZHIZEselect (data) {
			let { job_sub_func: id, job_sub_func_desc: info } = data
			let result = { id, info }
			this.$emit('formBottom_six_right', result)
		}
	},

	mounted () {
	},


}
</script>

<style lang='less'>
.classID {
  text-align: center;
  color: #56aadd;
  margin-top: -12px;
  margin-bottom: 12px;
  font-size: 15px;
}
.employRoster-dialog-table {
  .el-table__body-wrapper {
    .column {
      cursor: pointer !important;
    }

    .el-table__row:hover {
      color: #20a0ff !important;
    }
  }
}

.searchdxa {
  text-align: center;
  h4 {
    padding: 15px 0;
    color: rgb(195, 200, 200);
    font-size: 12px;
    font-weight: normal;
  }
}
</style>